@import '../../app.scss';

page {
  padding: 0 20rpx;
}

.info-box {
  border-bottom: 1rpx solid #e9e9e9;
}

.icon {
  width: 28rpx;
  height: 28rpx;
}

.collection-box {
  image {
    width: 42rpx;
    height: 42rpx;
  }
}

.name-box {
  border-bottom: 1rpx solid #e9e9e9;

  .photo {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
  }

  .vip-box {
    width: 30rpx;
    height: 30rpx;
    position: relative;
    line-height: 30rpx;

    image {
      position: absolute;
      width: 30rpx;
      height: 30rpx;
      top: 0;
      left: 0;
    }

    .vip-grade {
      position: absolute;
      font-size: 16rpx;
      left: 15rpx;
      transform: translate(-45%);
    }
  }

  .label-text {
    padding: 5rpx 10rpx;
    border-radius: 3rpx;
    background: map-get($map: $colors, $key: "yellow");
  }

  .license-icon {
    width: 58rpx;
    height: 42rpx;
  }
}

.content {
  border-bottom: 1rpx solid #e9e9e9;

  .requirement {
    text {
      display: block;
    }
  }
}

.evaluate-box {
  image {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
  }

  .evaluate-content {
    border-bottom: 1rpx solid #e9e9e9;
  }
}

.explain {
  margin-bottom: 140rpx;

  .warning {
    width: 24rpx;
    height: 24rpx;
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  height: 100rpx;
  width: 100%;
  border-top: 1rpx solid #e9e9e9;

  .advice {
    width: 45rpx;
    height: 43rpx;
  }

  .share {
    width: 41rpx;
    height: 41rpx;
  }

  .delivery {
    text-align: center;
    line-height: 58rpx;
    width: 470rpx;
    height: 58rpx;
    color: #fff;
    font-size: 32rpx;
    border-radius: 30rpx;
    background: map-get($map: $colors, $key: "blue");
  }


  .option-box {
    position: relative;

    button {
      background: none;
      position: absolute;
      top: 0;
      left: 0;
      // font-weight: 400 !important;
      // border-radius: 30rpx !important;
      width: 100%;
      height: 100%;
      line-height: 1 !important;
      padding: 0;
      margin: 0;

      &::after {
        border: none;
        padding: 0;
      }
    }
  }
}

.delivery {
  background: map-get($map: $colors, $key: "blue");
  font-weight: 400 !important;
  border-radius: 30rpx !important;
  width: 450rpx;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0;
  margin: 30rpx;
  color: #fff;

  &::after {
    border: none;
    padding: 0;
  }
}

.mask {
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;

  image {
    width: 458rpx;
    height: 656rpx;
  }

}

.mask-box {
  .message-box {
    width: 80%;
    border-radius: 10rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 10rpx;
    z-index: 9999;

    input {
      box-shadow: 1px 1px 2px 0px rgba(24, 25, 25, 0.25);
      box-sizing: border-box;
      padding: 0 10rpx;
    }

    .img-box {
      text-align: right;
    }

    image {
      width: 24rpx;
      height: 24rpx;
    }

    textarea {
      width: 100%;
      padding: 10rpx;
      font-size: 26rpx;
      box-shadow: 1px 1px 2px 0px rgba(24, 25, 25, 0.25);
      box-sizing: border-box;
    }
  }
}